import type { Menu } from "@/apis/auth/type";
import { Flex } from "antd";
import { useNavigate } from "react-router";
import { useLocation } from "react-router";
import '@/assets/css/menu.less'
export default function MenuItem({ menu }: { menu: Menu }) {

    const location = useLocation();
    const checked: boolean = menu.url === location.pathname;
    const navigate = useNavigate();
    const MenuStyle: React.CSSProperties = {
        height: 60,
        marginTop: 10,
    }
    const navigateTo = (url: string) => {
        navigate(url);
    }
    return (

        <Flex className={checked ? 'checked' : ''} onClick={() => navigateTo(menu.url)} style={MenuStyle} vertical justify="center" align="center">
            <span className={`icon iconfont ${menu.ico}`}></span>
            {menu.name.slice(0, 2)}
        </Flex>


    );
}